<template>
  <div class="scenario">
    <table class="content">
      <tr>
        <td class="cor4">
          <div class="grid-content" @click="nenghaofenxi">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>能耗分析</span>
            </div>
            <div class="slogan"><span>用来计算能耗相关公式</span>
            </div>
          </div>
        </td>
        <td class="cor4">
          <div class="grid-content" @click="erwupu">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>二污普</span>
            </div>
            <div class="slogan"><span>用来展示兵团师市工业企业废水治理与排放情况</span>
            </div>
          </div>
        </td>
        <td class="cor4">
          <div class="grid-content" @click="zhongdianjianguan">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>重点监管企业名录</span>
            </div>
            <div class="slogan"><span>重点监管企业名录</span>
            </div>
          </div>
        </td>
        <td class="cor4">
          <div class="grid-content" @click="ducha">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>环保督察</span>
            </div>
            <div class="slogan"><span>环保督察</span>
            </div>
          </div>
        </td>

      </tr>
      <tr>
        <td class="cor4" @click="policy">
          <div class="grid-content">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title"><span>政策文件</span>
            </div>
            <div class="slogan"><span>政策文件相关导入查看</span>
            </div>
          </div>
        </td>
        <td class="cor4" @click="approvalfile">
          <div class="grid-content">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>环评报告批复</span>
            </div>
            <div class="slogan"><span>规划环评审批文件导入查看</span>
            </div>
          </div>
        </td>
        <td class="cor4" @click="pollutant">
          <div class="grid-content">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>应税污染物和当量值</span>
            </div>
            <div class="slogan"><span>根据应税污染物和当量值计算税额</span>
            </div>
          </div>
        </td>
        <td class="cor4" @click="grading">
          <div class="grid-content">
            <div class="icon-btn">
              <img src="../../assets/img/daohang/project-info-selected.png">
            </div>
            <div class="title">
              <span>重污染绩效分级</span>
            </div>
            <div class="slogan"><span>通过选择行业类型和指标来进行企业绩效分级和查看引领性指标</span>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'scenario',
  methods: {
    nenghaofenxi() {
      this.$router.push({ path: "/energyAnalysis" });
    },
    erwupu() {
      this.$router.push({ path: "/erwupu" });
    },
    zhongdianjianguan() {
      this.$router.push({ path: "/enterprises" });
    },
    ducha() {
      this.$router.push({ path: "/ducha" });
    },
    policy() {
      this.$router.push({ path: "/policy" });
    },
    approvalfile(){
      this.$router.push({ path: "/approvalfile" });
    },
    pollutant() {
      this.$router.push({ path: "/pollutant" });
    },
    grading() {
      this.$router.push({ path: "/grading" });
    }
  }
}
</script>

<style scoped lang="less">
.scenario {
  background-color: white;
  position: absolute;
  left: 5px;
  top: 80px;
  bottom: 10px;
  right: 5px;
  border-radius: 8px;
  box-shadow: 0 0 8px #acc4fe;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.content {
  width: 83.35%;
  margin: 0 auto;
  -webkit-box-shadow: 0 12px 24px -6px rgba(9, 30, 66, .25);
  box-shadow: 0 12px 24px -6px rgba(9, 30, 66, .25);
  border: none;
  border-collapse: collapse;
  margin-top: 20px;

  .cor4 {
    background-image: url('../../assets/img/daohang/kq1.png'), url('../../assets/img/daohang/kq2.png'), url('../../assets/img/daohang/kq3.png'), url('../../assets/img/daohang/kq4.png') !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-position: 0 0, 100% 0, 0 100%, 100% 100% !important;
    padding: 2px !important;
    border: 0 !important;
    background-color: transparent !important;

  }
}

.content tr td {
  width: 25%;
}

.content tr td .grid-content {
  height: 168px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 63px 5px;
  color: #000;
  background-color: #f0f3fa;
  text-align: center;
  cursor: pointer;
}

.content tr td .grid-content:hover {
  background-color: #4B88E3;
}

.content tr td .grid-content .icon-btn {
  height: 52px;
  margin-bottom: 20px;
}

.content tr td .grid-content .title {
  font-weight: 700;
  margin-bottom: 16px;

  span {
    font-size: 20px;
  }

}

.content tr td .grid-content .slogan {
  font-size: 16px;
  color: #000;
}</style>
